<template>
    <div>
  <!-- 使用二级路由  想要使用二级路由就需要进行判断,是渲染哪一个 -->
  <!-- <div v-if="togoods">
  <GoodsSearch ></GoodsSearch>
  </div> -->
  <!-- 创建二级路由坑 -->
  <!-- 这里的原理是判断当前页面的路由是否是/home/goodssearch 如果是就渲染二级路由,如果不是,就渲染首页 -->
  <router-view v-if="$route.path=='/home/goodssearch'"></router-view>
  <!-- 首页的主要页面 -->
  <div v-else> 
      <!-- 给头部的搜索框添加一个点击事件,点击跳转到商品的搜索页面 -->
   <van-search v-model="value" placeholder="请输入搜索关键词"  shape='round'  @click="Togoods"/>
   <!-- 使用Swipe组件(轮播图) -->
   <!-- 将获取到的轮播图的信息传递到子组件中,使用父传子的方式 -->
   <!-- :属性名="属性值(data中的属性)"  父传子 -->
  
  <Swipe :bannerArr='bannerArr'></Swipe>
  
  <!-- 使用网格的组件  并将服务器返回的有关网格的数据 传递的子组件网格中 并在子组件中接收-->
  <Channel :channelArr="channelArr"></Channel>
  <!-- 使用品牌制造商的组件  并将服务器返回的有关品牌的数据,传递到子组件中-->
  <Brand :brandList="brandList"></Brand>
  <!-- 使用新品首发组件   并将服务器返回的有关新品首发的数据,传递到子组件中-->
  <NewStarting :newGoodsList="newGoodsList" title="周一周四新品首发"></NewStarting>
  <!-- 使用人气推荐组件   并将服务器返回的有关人气推荐的数据,传递到子组件中-->
  <HotGoodsList :hotGoodsList="hotGoodsList"></HotGoodsList>
   <!-- 使用专题精选的组件   并将服务器返回的有关专题精选的数据,传递到子组件中-->
   
   <TopicList :topicList="topicList"></TopicList>

   <!-- 使用商品详情的组件 -->
   <div v-for="item in categoryList" :key="item.id">
    
        <CategoryList :item="item" :names="item.name"></CategoryList>
   </div>
  
   </div>
   
    </div>
</template>

<script>
import Vue from "vue"
import Swipe from "@/views/HomeComponents/Swipe.vue"
// 导入首页所需要的请求,这里使用按需导出(解构赋值)
import {getIndexList} from "@/utils/http"
// 引入网格的组件 Channel.vue
import Channel from "@/views/HomeComponents/Channel.vue"
// 引入品牌制造商的组件
import Brand from "@/views/HomeComponents/Brand.vue"
// 引入新品首发组件
import NewStarting from "@/views/HomeComponents/NewStarting.vue"

// 引入人气推荐的组件
import HotGoodsList from "@/views/HomeComponents/HotGoodsList.vue"

// 引入专题精选的组件
import TopicList from "@/views/HomeComponents/TopicList.vue"

// 引入categoryList组件的
import CategoryList from "@/views/HomeComponents/CategoryList.vue"
// 引入首页的二级路由
import GoodsSearch from "@/views/GoodsSearch.vue"

// import Vant from 'vant';
// Vue.use(Lazyload, {
//   lazyComponent: true,
// });
export default {
    name: "Home",
    data() {
        return {
          value:'',    //搜索的关键字
          bannerArr:[],//服务器返回的轮播图数据
          channelArr:[], //关于频道的信息  
          brandList:[],   //关于品牌制造商的数据
          newGoodsList:[],   //关于新品首发的数据
          hotGoodsList:[],  //关于人气推荐的数据
          topicList:[],     //关于专题精选的数据
          categoryList:[],  //商品的详细信息
        

          
        };
    },
    components:{
     // 在这里注册轮播图的组件  Swipe.vue组件
      Swipe,
      // 注册网格的组件
      Channel,
      // 注册品牌制造商的组件
      Brand,
      // 注册新品首发组件
      NewStarting,
      // 注册人气推荐组件
      HotGoodsList,
      // 注册专题精选的组件
      TopicList,
      // 注册商品的详情组件
      CategoryList,
      // 注册首页的二级路由
      GoodsSearch,
    },
    created(){
     getIndexList().then((res)=>{
      this.bannerArr=res.data.data.banner,
      this.channelArr=res.data.data.channel,
      this.brandList=res.data.data.brandList,
      this.newGoodsList=res.data.data.newGoodsList,
      this.hotGoodsList=res.data.data.hotGoodsList,
      this.topicList=res.data.data.topicList,
      this.categoryList=res.data.data.categoryList
      // console.log(res.data.data);
      // console.log(this.categoryList);
     
     
      
     })
   
    },
    methods:{
    // 创建首页头部的搜索框的点击事件的回调函数
    Togoods(){
      // 使用原型对象上的 this.$router.push 来进行页面的跳转
     this.$router.push('/home/goodssearch')
      
    }
    }
};
</script>

<style scoped>

</style>